<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<link data-n-head="ssr" rel="icon" type="image/x-icon" href="./img/小草.png">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="./jquery.fullPage.css" />
	<script type="text/javascript" src="./jquery.min.js"></script>
	<script type="text/javascript" src="./jquery.fullPage.min.js"></script>
	<script type="text/javascript" src="jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>


	<title>大学生心理健康</title>
	<style >
.container {
  position: relative;
}
html {
  font-size: calc(100vh / 100);
}
* {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 0;
  transition: transform 0.4s;
}
.fp-tableCell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page {
  background-image: url("./img/p4/颜色填充 1.png");
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
}
/* 横屏提示样式 */
.landscape-tip {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 3rem;
  justify-content: center;
  align-items: center;

}
.tips{
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
}
.p1c1,
.p1c2,
.p1c3 {
  width: 20rem;
  height: auto;
}
.p1b1,
.p1b2 {
  width: 35rem;
  height: auto;
}
.p1box {
  width: 215.46vh;
  height: 100vh;
  background-image: url("./img/p1/p1bg.png");
  /*overflow: hidden;*/
  /*display: flex;*/
  /*justify-content: center;*/
  align-items: center;
  position: relative;
  z-index: 1;
}
.p1box .p1p1 {
  position: absolute;
  background-image: url("./img/p1/底层.png");
  background-size: auto 100% ;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.p1box .p1p2 {
  position: absolute;
  background-image: url("./img/p1/次层.png");
  background-size: auto 100% ;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 3;
}
.p1box .p1p3 {
  position: absolute;
  background-image: url("./img/p1/顶层.png");
  background-size: auto 100% ;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 6;
}
.p1box .p1c1 {
  position: absolute;
  top: 25%;
  left: 40%;
  z-index: 1;
}
.p1box .p1c2 {
  position: absolute;
  top: 10%;
  left: 36%;
  z-index: 3;
  /* 修改此处的 z-index */
}
.p1box .p1c3 {
  position: absolute;
  top: 20%;
  left: 55%;
  z-index: 1;
  /* 修改此处的 z-index */
}
.p1box .p1b1 {
  position: absolute;
  top: 20%;
  left: 10%;
  z-index: 6;
  /* 修改此处的 z-index */
}
.p1box .p1b2 {
  position: absolute;
  top: 60%;
  left: 75%;
  z-index: 6;
  /* 修改此处的 z-index */
}
.p1box .p1s1 {
  width: 52rem;
  position: absolute;
  top: 36%;
  left: 38%;
  z-index: 6;
  /* 修改此处的 z-index */
}
/* 动画定义 */
@keyframes moveUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes moveDown {
  from {
    transform: translateY(-200%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes moveLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes moveRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes moveRightDown {
  from {
    transform: translate(100%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.p1p1,
.p1p2,
.p1p3,
.p1c1,
.p1c2,
.p1c3,
.p1b1,
.p1b2,
.p1s1 {
  opacity: 0;
}
.animate-moveUp {
  animation: moveUp 1s 1.5s forwards;
}
.animate-moveUp1 {
  animation: moveUp 1s  forwards;
}
.animate-moveDown {
  animation: moveDown 1s  forwards;
}
.animate-moveRight {
  animation: moveRight 1s 1.2s forwards;
}
.animate-moveRightDown {
  animation: moveRightDown 1s 2s forwards;
}
.animate-fadeIn {
  animation: fadeIn 1s 2.5s forwards;
}
#text-area {
  text-align: left;
  font-size: 5rem;
  color: #333;
  display: inline-block;
  position: relative;
}
#cursor {
  width: 0.2rem;
  height: 5rem;
  background-color: #333;
  position: absolute;
  top: 45%;
  animation: blink 0.5s infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.p2box {
  background-image: url("./img/p2/5dd376.png");
  width: 215.46vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.p2box .p2sbox {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  padding-left: 10rem;
  padding-bottom: 3rem;
  align-items: center;
  width: 150rem;
  height: 75rem;
  background-image: url("./img/p2/搜索.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  transition: transform 1s;
  z-index: 8;
}
.p2box .p2p1 {
  height: 100vh;
  position: absolute;
  z-index: 6;
  opacity: 0;
}
.p2box .p2p2 {
  height: 100vh;
  position: absolute;
  z-index: 3;
  opacity: 0;
}
.p2box .p2p3 {
  height: 100vh;
  position: absolute;
  z-index: 4;
  opacity: 0;
}
.p2box .p2p4 {
  height: 100vh;
  position: absolute;
  z-index: 2;
  opacity: 0;
}
.p2box .p2p5 {
  height: 100vh;
  position: absolute;
  z-index: 1;
  opacity: 0;
}
.p2box .p2p6 {
  position: absolute;
  width: 20rem;
  top: 12%;
  left: 11%;
  z-index: 7;
  opacity: 0;
}
.p2box .p2p7 {
  width: 35rem;
  position: absolute;
  bottom: 2%;
  right: 1%;
  z-index: 7;
  opacity: 0;
}
.p2box .p2s1 {
  width: 80rem;
  position: absolute;
  top: 10.111%;
  z-index: 7;
  opacity: 0;
}
.p2box .p2s2 {
  width: 6rem;
  position: absolute;
  top: 38%;
  left: 23.7%;
  z-index: 6;
  opacity: 0;
}
.p2box .p2s3 {
  width: 6rem;
  position: absolute;
  top: 36%;
  z-index: 6;
  opacity: 0;
}
.p2box .p2s4 {
  width: 6rem;
  position: absolute;
  top: 42%;
  right: 23.7%;
  z-index: 6;
  opacity: 0;
}
@keyframes MoveUp {
  from {
    transform: translateY(-100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes MoveDown {
  from {
    transform: translateY(100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes MoveRight {
  from {
    transform: translateX(100vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.p2p1a {
  animation: FadeIn 1s  forwards;
}
.p2p2a {
  animation: MoveDown 1s 0.8s forwards;
}
.p2p3a {
  animation: MoveUp 1s 0.8s forwards;
}
.p2p4a {
  animation: FadeIn 1s 1.2s forwards;
}
.p2p5a {
  animation: FadeIn 1s 0.8s forwards;
}
.p2p6a {
  animation: FadeIn 1s 1.5s forwards;
}
.p2p7a {
  animation: FadeIn 1s 1.5s forwards;
}
.p2s1a {
  animation: FadeIn 1s 0.8s forwards;
}
.p2s2a,
.p2s3a,
.p2s4a {
  animation: FadeIn 1s 1.8s forwards;
}
.p2box.small .p2sbox {
  transform: translate(50%, -50%) scale(0.5);
}
.p3box {
  background-image: url("./img/p3/必须填充5dd376.png");
  width: 215.46vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.p3box .p3p1 {
  height: 100vh;
  position: absolute;
  z-index: 1;
}
.p3box .p3p2 {
  height: 100vh;
  position: absolute;
  /*opacity: 0;*/
  z-index: 1;
}
.p3box .p3p3 {
  width: 40rem;
  right: 1%;
  top: 12%;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.p3box .p3p4 {
  width: 120rem;
  top: 28%;
  left: 2%;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.p3box .p3p5 {
  width: 60rem;
  top: 45%;
  left: 2%;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.p3box .p3p6 {
  width: 70rem;
  right: 5%;
  bottom: 0;
  position: absolute;
  z-index: 1;
  opacity: 0;
}
@keyframes MoveRightBig {
  0% {
    transform: translateX(100vw) scaleY(1);
  }
  10%,
  20% {
    transform: translateX(80vw) scaleY(0.9);
  }
  30%,
  50% {
    transform: translateX(60vw) scaleY(1.1);
  }
  60%,
  70% {
    transform: translateX(40vw) scaleY(0.9);
  }
  80%,
  90% {
    transform: translateX(20vw) scaleY(1.1);
  }
  100% {
    transform: translateX(0) scaleY(1);
  }
}
@keyframes moveLeft {
  from {
    transform: translateX(-100vw);
    opacity: 1;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.p3p1a {
  animation: moveLeft 1s  forwards;
}
.p3p2a {
  animation: moveLeft 1s forwards;
}
.p3p3a {
  animation: moveLeft 1s  forwards;
}
.p3p4a,
.p3p5a {
  animation: FadeIn 1s 0.8s forwards;
}
.p3p6a {
  animation: MoveUp 1s 0.8s forwards;
}
.p4box {
  background-image: url("./img/p4/颜色填充 1.png");
  width: 215.46vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.p4box .p4p1 {
  height: 100vh;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.p4box .p4p2 {
  height: 100vh;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p4box .p4p3 {
  height: 100vh;
  position: absolute;
  opacity: 0;
  z-index: 3;
}
.p4box .p4p4 {
  width: 25rem;
  right: 34%;
  top: 55%;
  position: absolute;
  opacity: 0;
  z-index: 3;
}
.p4box .p4p5 {
  width: 8rem;
  right: 38%;
  top: 42%;
  position: absolute;
  opacity: 0;
  z-index: 3;
}
.p4box .p4p6 {
  width: 46rem;
  right: 46%;
  top: 27%;
  position: absolute;
  opacity: 0;
  z-index: 3;
}
.p4box .p4p7 {
  width: 40rem;
  left: 2%;
  top: 62%;
  position: absolute;
  opacity: 0;
  z-index: 4;
}
.p4box .p4p8 {
  width: 40rem;
  left: 2%;
  top: 88%;
  position: absolute;
  z-index: 4;
  opacity: 0;
}
@keyframes MoveUp {
  from {
    transform: translateY(100vh);
    opacity: 1;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes MoveDown {
  from {
    transform: translateY(-100vh);
    opacity: 1;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes MoveLeft {
  from {
    transform: translateX(-100vw);
    opacity: 1;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes MoveRight {
  from {
    transform: translateX(100vw);
    opacity: 1;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.p4p2a {
  animation: moveUp 1s forwards;
}
.p4p3a {
  animation: moveDown 1s forwards;
}
.p4p1a,
.p4p4a {
  animation: FadeIn 1s 0.8s forwards;
}
.p4p5a,
.p4p6a {
  animation: FadeIn 1s 1.2s forwards;
}
.p4p8a {
  animation: MoveLeft 1s 1.6s forwards;
}
.p4p7a {
  animation: MoveUp 1s 1.6s forwards;
}
.p5box {
  background-image: url("./img/p5/颜色填充 1.png");
  width: 215.46vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.p5box .p5p1 {
  width: 100%;
  bottom: 0;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.p5box .p5p2 {
  width: 100%;
  bottom: 0;
  position: absolute;
  opacity: 0;
  z-index: 3;
}
.p5box .p5p3 {
  width: 100%;
  bottom: 0;
  position: absolute;
  opacity: 0;
  z-index: 4;
}
.p5box .p5p4 {
  width: 100%;
  top: 0;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p5box .p5p5 {
  width: 40rem;
  top: 8%;
  left: 5%;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p5box .p5p6 {
  width: 20rem;
  top: 5%;
  right: 5%;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p5box .p5p7 {
  width: 140rem;
  top: 10%;
  left: 20%;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p5box .p5p8 {
  width: 20rem;
  left: 10%;
  bottom: 18%;
  position: absolute;
  opacity: 0;
  z-index: 3;
}
.p5box .p5p9 {
  width: 20rem;
  right: 25%;
  bottom: 22%;
  position: absolute;
  opacity: 0;
  z-index: 5;
}
.p5box .p5s1 {
  width: 90rem;
  right: 32%;
  bottom: 35%;
  position: absolute;
  z-index: 2;
  opacity: 0;
}
.p5p2a {
  animation: MoveUp 1s forwards;
}
.p5p3a {
  animation: MoveUp 2s forwards;
}
.p5p4a {
  animation: MoveDown 1s forwards;
}
.p5p1a,
.p5p5a,
.p5p9a,
.p5p7a,
.p5p8a {
  animation: MoveLeft 1s 0.8s forwards;
}
.p5p9a{
	animation: MoveLeft 1.5s 0.8s forwards;
}
.p5p5a,
.p5p8a {
  animation: MoveLeft 0.7s 0.8s forwards;
}
.p5p6a,
.p5s1a {
  animation: FadeIn 1s 1.8s forwards;
	transform: rotate(0deg);
}
@keyframes Rotate {
	from {
		transform: rotate(0deg);
		opacity: 1;
	}
	to {
		transform: rotate(360deg);
		opacity: 1;
	}
}
.rotate {
	animation: Rotate infinite 10s;
	transform-origin: center;
}
.p6box {
  background-image: url("./img/p6/bg.png");
  width: 215.46vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.p6box .p6p1 {
  height: 100vh;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.p6box .p6p2 {
  width: 35rem;
  bottom: 2%;
  position: absolute;
  opacity: 0;
  z-index: 3;
}
.p6box .p6p3 {
  width: 65rem;
  top: 10%;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p6box .p6p4 {
  width: 65rem;
  right: 0;
  top: 10%;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p6box .p6p5 {
  width: 65rem;
  left: 2%;
  bottom: 10%;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p6box .p6p6 {
  width: 65rem;
  left: 2%;
  bottom: 15%;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.p6p1a {
  animation: MoveDown 1s forwards;
}
.p6p2a,
.p6p3a {
  animation: FadeIn 0.8s 1.2s forwards;
}
.p6p4a {
  animation: FadeIn 0.8s 2.2s forwards;
}
.p6p5a {
  animation: MoveLeft 0.8s 2s forwards;
}
.p6p6a {
  animation: MoveUp 0.8s 2.2s forwards;
}
.p7box {
  background-image: url("./img/p3/必须填充5dd376.png");
  width: 215.46vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.p7box .sss {
  font-weight: 700;
  font-size: 10rem;
  color: #fff;
  position: absolute;
  bottom: 5%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
}
.p7box .r1 {
  right: 30%;
}
.p7box .r2 {
  right: 20.8%;
}

.p7box .l1 {
  left: 35%;
}
.p7box .l2 {
  left: 42%;
}
.p7box .h1 {
  font-weight: 700;
  font-size: 20rem;
  color: #fff !important;
  position: absolute;
  /*transform: translate(-50%,-50%);*/
  opacity: 0;
  z-index: 2;
}
@keyframes ShowText {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes TextMoveUp {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 5%;
  }
}
.n1a {
  animation: ShowText 0.8s 0.5s forwards;
}
.n2a {
  animation: ShowText 0.8s 0.9s forwards;
}
.n3a {
  animation: ShowText 1s 1.5s forwards;
}
.n4a {
  animation: ShowText 0.8s 1.7s forwards;
}
.n5a {
  animation: ShowText 1.2s 1.8s forwards;
}
.n6a {
  animation: ShowText 1.2s 2s forwards;
}
.n7a {
  animation: ShowText 0.8s 3.2s forwards;
}
.n8a {
  animation: ShowText 0.8s 3.4s forwards;
}
.n9a {
  animation: ShowText 1.2s 4s forwards;
}
.n10a {
  animation: ShowText 1.2s 4.3s forwards;
}
.n11a {
  animation: ShowText 1.2s 4.6s forwards;
}
.n12a {
  animation: ShowText 1.2s 4.9s forwards;
}
.n13a {
  animation: FadeIn 1s 6s forwards;
}


		</style>

		</head>
		<script src="./vue.js"></script>
		<body>


		<div id="app">

		<div  class="container" id="container" >
		<div class=" section page" >
		<div class="p1box"  >
		<div class="p1p1" ></div>
		<div class="p1p2"></div>
		<div class="p1p3"></div>
		<img class="p1c1" src="img/p1/底层云.png" alt="云">
		<img class="p1c2" src="img/p1/次层云.png" alt="云">
		<img class="p1c3" src="img/p1/形状%201.png" alt="云">
		<img class="p1b1" src="img/p1/鸽子1.png" alt="鸟">
		<img class="p1b2" src="img/p1/鸽子1.png" alt="鸟">
		<img class="p1s1" src="img/p1/大学生如何建立 良好人际关系.png" alt="字">
		</div>
		</div>
		<div class=" section page" >
			<div class="p2box">
				<div class="p2sbox">
					<div id="text-area"></div>
					<div id="cursor"></div>
				</div>
				<img class="p2p1" src="./img/p2/网.png" alt="网" >
				<img class="p2p2" src="./img/p2/次层.png" alt="次层" >
				<img class="p2p3" src="./img/p2/顶层.png" alt="顶层" >
				<img class="p2p4" src="./img/p2/屏幕光.png" alt="背光" >
				<img class="p2p5" src="./img/p2/颜色填充%201.png" alt="颜色填充" >
				<img class="p2p6" src="./img/p2/信号.png" alt="颜色填充" >

				<img class="p2p7" src="./img/p2/分享.png" alt="logo" >

				<img class="p2s1" src="./img/p2/标题.png" alt="标题" >
				<img class="p2s2" src="./img/p2/交往虚拟化.png" alt="小字" >
				<img class="p2s3" src="./img/p2/交往过程焦虑.png" alt="小字" >
				<img class="p2s4" src="./img/p2/逃避交往.png" alt="小字" >

			</div>
		</div>
		<div class=" section page" >
			<div class="p3box">
				<img class="p3p1 " src="./img/p3/bg.png" alt="烟雾背景">
				<img class="p3p2" src="./img/p3/烟雾.png" alt="烟雾">
				<img class="p3p3" src="./img/p3/飞机.png" alt="飞机">
				<img class="p3p4" src="./img/p3/文字1.png" alt="文字">
				<img class="p3p5" src="./img/p3/文字2.png" alt="文字">
				<img class="p3p6" src="./img/p3/房子.png" alt="房子">
			</div>
		</div>
		<div class=" section page" >
			<div class="p4box">
				<img class="p4p1" src="./img/p4/p4底层.png" alt="底层">
				<img class="p4p2" src="./img/p4/次层.png" alt="次层">
				<img class="p4p3" src="./img/p4/顶层.png" alt="顶层">
				<img class="p4p4" src="./img/p4/笑脸.png" alt="笑脸">
				<img class="p4p5" src="./img/p4/组%201.png" alt="人">
				<img class="p4p6" src="./img/p4/p4文字.png" alt="文字">
				<img class="p4p7" src="./img/p4/Hello, World_.png" alt="文字H">
				<img class="p4p8" src="./img/p4/横线.png" alt="横线">
			</div>
		</div>
		<div class=" section page" >
			<div class="p5box">
				<img class="p5p1" src="./img/p5/底层.png" alt="底层">
				<img class="p5p2" src="./img/p5/次层.png" alt="次层">
				<img class="p5p3" src="./img/p5/顶层.png" alt="顶层">
				<img class="p5p4" src="./img/p5/天空.png" alt="天空">
				<img class="p5p5" src="./img/p5/鸽子.png" alt="鸟">
				<img class="p5p6" src="./img/p5/太阳.png" alt="太阳">
				<img class="p5p7" src="./img/p5/瓶子.png" alt="瓶子">
				<img class="p5p8" src="./img/p5/红色船.png" alt="小船">
				<img class="p5p9" src="./img/p5/紫色船.png" alt="小船">
				<img class="p5s1" src="./img/p5/文字.png" alt="文字">
			</div>
		</div>
		<div class=" section page" >
			<div class="p6box">
				<img class="p6p1" src="./img/p6/上层.png" alt="上层">
				<img class="p6p2" src="./img/p6/灯帽.png" alt="灯帽">
				<img class="p6p3" src="./img/p6/亮度.png" alt="灯亮">
				<img class="p6p4" src="./img/p6/篮球.png" alt="篮球">
				<img class="p6p5" src="./img/p6/横线.png" alt="横线">
				<img class="p6p6" src="./img/p6/文字.png" alt="文字">
			</div>
		</div>
		<div class=" section page" >
				<div class="p7box">
					<div class="n1 sss r1">这是</div>
					<div class="n2 sss r2">我们</div>
					<div class="n3 sss l1">自己</div>
					<div class="n4 sss l2">的</div>
					<div class="n5 sss r1">原创</div>
					<div class="n6 sss r2">作品</div>
					<div class="n7 sss l1">希望</div>
					<div class="n8 sss r1">您</div>
					<div class="n9 sss l1">喜欢</div>
					<div class="n10 sss r1">感谢</div>
					<div class="n11 sss r2">支持</div>
					<div class="n13 h1">感谢观看 </div>
				</div>
			</div>
	</div>
			<audio id="bgMusic"  autoplay loop hidden>
				<source src="./睡觉轻音乐%20-%20飞鸟-竖琴%20(催眠曲).mp3" type="audio/mpeg">
				您的浏览器不支持audio元素。
			</audio>
	<!-- 横屏提示 -->
	<div class="landscape-tip" >
		<img class="tips" src="./img/landscape-tip.png" alt="提示">

	</div>
</div>


</body>

<script>
	const bgMusic = document.getElementById('bgMusic');

	function tryPlay() {
		const playPromise = bgMusic.play();
		if (playPromise !== undefined) {
			playPromise.then(() => {
				document.removeEventListener('touchstart', tryPlay);
			}).catch((error) => {
				console.log('自动播放失败：', error);
			});
		}
	}

	document.addEventListener('DOMContentLoaded', tryPlay);
	document.addEventListener('touchstart', tryPlay);
	$('.p1p1').addClass('animate-moveUp');
	$('.p1p2').addClass('animate-moveDown');
	$('.p1p3').addClass('animate-moveUp1');
	$('.p1c1,.p1c2,.p1c3').addClass('animate-moveRight')
	$('.p1b1,.p1b2').addClass('animate-moveRightDown')
	$('.p1s1').addClass('animate-fadeIn')
	window.onload = function() {
		var loader = document.getElementById('loader');
		loader.style.display = 'none';
	};
$(function(){
	$('#container').fullpage({
		afterLoad: function(anchorLink, index){
			console.log(anchorLink, index)

		},
		onLeave: function(index, nextIndex, direction){
			console.log(index, nextIndex, direction)
			if(nextIndex === 1){
				$('.p1p1').addClass('animate-moveUp');
				$('.p1p2').addClass('animate-moveDown');
				$('.p1p3').addClass('animate-moveUp1');
				$('.p1c1,.p1c2,.p1c3').addClass('animate-moveRight')
				$('.p1b1,.p1b2').addClass('animate-moveRightDown')
				$('.p1s1').addClass('animate-fadeIn')
			}
		 if(index === 1) {
				$('.p1p1').removeClass('animate-moveUp');
				$('.p1p2').addClass('animate-moveDown');
				$('.p1p3').removeClass('animate-moveUp1');
				$('.p1c1,.p1c2,.p1c3').removeClass('animate-moveRight')
				$('.p1b1,.p1b2').removeClass('animate-moveRightDown')
				$('.p1s1').removeClass('animate-fadeIn')
			}
			if (index === 2) {
				// 离开索引为2的section时移除动画并清除定时器




				$('.p2p1').removeClass('p2p1a');
				$('.p2p2').removeClass('p2p2a');
				$('.p2p3').removeClass('p2p3a');
				$('.p2p4').removeClass('p2p4a');
				$('.p2p5').removeClass('p2p5a');
				$('.p2p6').removeClass('p2p6a');
				$('.p2p7').removeClass('p2p7a');
				$('.p2s1').removeClass('p2s1a');
				$('.p2s2').removeClass('p2s2a');
				$('.p2s3').removeClass('p2s3a');
				$('.p2s4').removeClass('p2s4a');
			}
		 if (nextIndex === 2){

			 let text = "大学生人际关系现状";
			 let index = 0;
			 let textArea = document.getElementById("text-area");

			 function printText() {
			 	if (index < text.length) {
				  textArea.innerHTML = text.substr(0, index + 1);
			 		index++;
			 		let textAreaRect = textArea.getBoundingClientRect();
			 		let cursor = document.getElementById("cursor");
			 		cursor.style.left = textAreaRect.left + textAreaRect.width + "rem";
			 		// cursor.style.top = textAreaRect.top + "px";
			 	} else {
			 		clearInterval(timer);
			 		let cursor = document.getElementById("cursor");
			 		cursor.parentNode.removeChild(cursor); // 删除光标元素
			 		let p2sbox = document.querySelector(".p2sbox");
			 		p2sbox.style.transform = "translate(calc(100% - 105rem), -56%) scale(0.67)";
			 		setTimeout(()=>{
			 			textArea.innerHTML =''
			 		},800)
			 	}
			 }

			 let timer = setInterval(function() {
			 	printText();
			 }, 100);

			 let cursor = document.getElementById("cursor");
			 setInterval(function() {
			 	if (cursor.style.display === "none") {
			 		cursor.style.display = "block";
			 	} else {
			 		cursor.style.display = "none";
			 	}
				 $('.p2p1').addClass('p2p1a');
				 $('.p2p2').addClass('p2p2a');
				 $('.p2p3').addClass('p2p3a');
				 $('.p2p4').addClass('p2p4a');
				 $('.p2p5').addClass('p2p5a');
				 $('.p2p6').addClass('p2p6a');
				 $('.p2p7').addClass('p2p7a');
				 $('.p2s1').addClass('p2s1a');
				 $('.p2s2').addClass('p2s2a');
				 $('.p2s3').addClass('p2s3a');
				 $('.p2s4').addClass('p2s4a');

			 }, 500);
		 }
			if (nextIndex === 3) {
				$('.p3p1').addClass('p3p1a');
				$('.p3p2').addClass('p3p2a');
				$('.p3p3').addClass('p3p3a');
				$('.p3p4').addClass('p3p4a')
				$('.p3p5').addClass('p3p5a')
				$('.p3p6').addClass('p3p6a')
			}
			if(index === 3){
				$('.p3p1').removeClass('p3p1a');
				$('.p3p2').removeClass('p3p2a');
				$('.p3p3').removeClass('p3p3a');
				$('.p3p4').removeClass('p3p4a')
				$('.p3p5').removeClass('p3p5a')
				$('.p3p6').removeClass('p3p6a')
			}
			if(nextIndex ===4){
				$('.p4p1').addClass('p4p1a');
				$('.p4p2').addClass('p4p2a');
				$('.p4p3').addClass('p4p3a');
				$('.p4p4').addClass('p4p4a');
				$('.p4p5').addClass('p4p5a');
				$('.p4p6').addClass('p4p6a');
				$('.p4p7').addClass('p4p7a');
				$('.p4p8').addClass('p4p8a');

			}
			if (index === 4) {
				$('.p4p1').removeClass('p4p1a');
				$('.p4p2').removeClass('p4p2a');
				$('.p4p3').removeClass('p4p3a');
				$('.p4p4').removeClass('p4p4a');
				$('.p4p5').removeClass('p4p5a');
				$('.p4p6').removeClass('p4p6a');
				$('.p4p7').removeClass('p4p7a');
				$('.p4p8').removeClass('p4p8a');
			}
			if(nextIndex === 5 ){
				$('.p5p1').addClass('p5p1a');
				$('.p5p2').addClass('p5p2a');
				$('.p5p3').addClass('p5p3a');
				$('.p5p4').addClass('p5p4a');
				$('.p5p5').addClass('p5p5a');
				$('.p5p6').addClass('p5p6a');
				setTimeout(()=>{
					$('.p5p6').addClass('rotate');
				},2500)
				$('.p5p7').addClass('p5p7a');
				$('.p5p8').addClass('p5p8a');
				$('.p5p9').addClass('p5p9a');
				$('.p5s1').addClass('p5s1a')
			}
			if(index === 5){
				$('.p5p1').removeClass('p5p1a');
				$('.p5p2').removeClass('p5p2a');
				$('.p5p3').removeClass('p5p3a');
				$('.p5p4').removeClass('p5p4a');
				$('.p5p5').removeClass('p5p5a');
				$('.p5p6').removeClass('p5p6a rotate');

				$('.p5p7').removeClass('p5p7a');
				$('.p5p8').removeClass('p5p8a');
				$('.p5p9').removeClass('p5p9a');
				$('.p5s1').removeClass('p5s1a')

			}
			if(nextIndex === 6){
				$('.p6p1').addClass('p6p1a');
				$('.p6p2').addClass('p6p2a');
				$('.p6p3').addClass('p6p3a');
				$('.p6p4').addClass('p6p4a');
				$('.p6p5').addClass('p6p5a');
				$('.p6p6').addClass('p6p6a');
			}
			if (index === 6) {
				$('.p6p1').removeClass('p6p1a');
				$('.p6p2').removeClass('p6p2a');
				$('.p6p3').removeClass('p6p3a');
				$('.p6p4').removeClass('p6p4a');
				$('.p6p5').removeClass('p6p5a');
				$('.p6p6').removeClass('p6p6a');
			}
			if(nextIndex === 7){
				$('.n1').addClass('n1a');
				$('.n2').addClass('n2a');
				$('.n3').addClass('n3a');
				$('.n4').addClass('n4a');
				$('.n5').addClass('n5a');
				$('.n6').addClass('n6a');
				$('.n7').addClass('n7a');
				$('.n8').addClass('n8a');
				$('.n9').addClass('n9a');
				$('.n10').addClass('n10a');
				$('.n11').addClass('n11a');
				$('.n12').addClass('n12a');
				$('.n13').addClass('n13a');
			}
			if (index === 7) {
				$('.n1').removeClass('n1a');
				$('.n2').removeClass('n2a');
				$('.n3').removeClass('n3a');
				$('.n4').removeClass('n4a');
				$('.n5').removeClass('n5a');
				$('.n6').removeClass('n6a');
				$('.n7').removeClass('n7a');
				$('.n8').removeClass('n8a');
				$('.n9').removeClass('n9a');
				$('.n10').removeClass('n10a');
				$('.n11').removeClass('n11a');
				$('.n12').removeClass('n12a');
				$('.n13').removeClass('n13a');
}
		},
		afterResize: function(){
			console.log('afterResize')
			$.fn.fullpage.reBuild();
		}



	})
})

	// new Vue({
	// 	el: '#app',
	// 	data() {
	// 		return {
	// 			isShow: false,
	// 		};
	// 	},
	//
	// });
	const landscapeTip = document.querySelector('.landscape-tip');
	// Check screen orientation and show/hide tips-->
			const checkOrientation = () => {
				const isMobile = /Mobi|Android/i.test(navigator.userAgent);
				const isLandscape = window.innerWidth > window.innerHeight;
				if (isMobile && !isLandscape) {
					landscapeTip.style.display = 'flex';
				} else {
					landscapeTip.style.display = 'none';
				}
			};

			// Listen for screen size change events-->
			window.addEventListener('resize', checkOrientation);

			// Check screen orientation on page load-->
			checkOrientation();
	// let text = "大学生人际关系现状";
	// let index = 0;
	// let textArea = document.getElementById("text-area");
	//
	// function printText() {
	// 	if (index < text.length) {
	// 		let currentText = text.substr(0, index + 1);
	// 		textArea.innerHTML = currentText;
	// 		index++;
	// 		let textAreaRect = textArea.getBoundingClientRect();
	// 		let cursor = document.getElementById("cursor");
	// 		cursor.style.left = textAreaRect.left + textAreaRect.width + "rem";
	// 		// cursor.style.top = textAreaRect.top + "px";
	// 	} else {
	// 		clearInterval(timer);
	// 		let cursor = document.getElementById("cursor");
	// 		cursor.parentNode.removeChild(cursor); // 删除光标元素
	// 		let p2sbox = document.querySelector(".p2sbox");
	// 		p2sbox.style.transform = "translate(calc(100% - 105rem), -56%) scale(0.67)";
	// 		setTimeout(()=>{
	// 			textArea.innerHTML =''
	// 		},800)
	// 	}
	// }
	//
	// let timer = setInterval(function() {
	// 	printText();
	// }, 100);
	//
	// let cursor = document.getElementById("cursor");
	// setInterval(function() {
	// 	if (cursor.style.display === "none") {
	// 		cursor.style.display = "";
	// 	} else {
	// 		cursor.style.display = "none";
	// 	}
	// }, 500);
</script>
<!--<script>-->
<!--	window.addEventListener('DOMContentLoaded', () => {-->
<!--		let pageIndex = 0;-->
<!--		let startY = 0;-->
<!--		let scrolling = false;-->
<!--		const container = document.querySelector('.container');-->
<!--		const pages = document.querySelectorAll('.page');-->
<!--		const pageCount = pages.length;-->
<!--		const landscapeTip = document.querySelector('.landscape-tip');-->
<!--		-->
<!--		const setPageIndex = (index) => {-->
<!--			pageIndex = index;-->
<!--			container.style.transform = `translateY(-${pageIndex * 100}vh)`;-->
<!--		};-->
<!--		-->
<!--		const handleScroll = (delta) => {-->
<!--			if (scrolling) return;-->
<!--			scrolling = true;-->
<!--			setTimeout(() => scrolling = false, 400);-->
<!--			-->
<!--			const newIndex = pageIndex + delta;-->
<!--			if (newIndex >= 0 && newIndex < pageCount) {-->
<!--				setPageIndex(newIndex);-->
<!--			}-->
<!--		};-->
<!--		-->
<!--		window.addEventListener('wheel', (event) => {-->
<!--			const delta = event.deltaY > 0 ? 1 : -1;-->
<!--			handleScroll(delta);-->
<!--		});-->
<!--		-->
<!--		window.addEventListener('touchstart', (event) => {-->
<!--			startY = event.touches[0].clientY;-->
<!--		});-->
<!--		-->
<!--		window.addEventListener('touchend', (event) => {-->
<!--			const deltaY = startY - event.changedTouches[0].clientY;-->
<!--			const delta = deltaY > 0 ? 1 : -1;-->
<!--			if (Math.abs(deltaY) > 50) {-->
<!--				handleScroll(delta);-->
<!--			}-->
<!--		});-->
<!--		-->
<!--		// Check screen orientation and show/hide tips-->
<!--		const checkOrientation = () => {-->
<!--			const isMobile = /Mobi|Android/i.test(navigator.userAgent);-->
<!--			const isLandscape = window.innerWidth > window.innerHeight;-->
<!--			if (isMobile && !isLandscape) {-->
<!--				landscapeTip.style.display = 'flex';-->
<!--			} else {-->
<!--				landscapeTip.style.display = 'none';-->
<!--			}-->
<!--		};-->
<!--		-->
<!--		// Listen for screen size change events-->
<!--		window.addEventListener('resize', checkOrientation);-->
<!--		-->
<!--		// Check screen orientation on page load-->
<!--		checkOrientation();-->
<!--	});-->


<!--</script>-->
<!--<script>-->
	// // 页面元素
	// const elements = {
	// 	p1p1: { element: document.querySelector('.p1p1'), animationClass: 'animate-moveUp' },
	// 	p1p2: { element: document.querySelector('.p1p2'), animationClass: 'animate-moveUp1' },
	// 	p1p3: { element: document.querySelector('.p1p3'), animationClass: 'animate-moveDown' },
	// 	p1c1: { element: document.querySelector('.p1c1'), animationClass: 'animate-moveRight' },
	// 	p1c2: { element: document.querySelector('.p1c2'), animationClass: 'animate-moveRight' },
	// 	p1c3: { element: document.querySelector('.p1c3'), animationClass: 'animate-moveRight' },
	// 	p1b1: { element: document.querySelector('.p1b1'), animationClass: 'animate-moveRightDown' },
	// 	p1b2: { element: document.querySelector('.p1b2'), animationClass: 'animate-moveRightDown' },
	// 	p1s1: { element: document.querySelector('.p1s1'), animationClass: 'animate-fadeIn' },
	// };
	//
	// function playAnimation(scrollTop) {
	// 	const shouldPlay = scrollTop >= 0 && scrollTop < window.innerHeight;
	//
	// 	// 满足播放条件，为每个元素添加动画类
	// 	if (shouldPlay) {
	// 		for (const key in elements) {
	// 			if (!elements[key].element.classList.contains(elements[key].animationClass)) {
	// 				elements[key].element.classList.add(elements[key].animationClass);
	// 			}
	// 		}
	// 	} else {
	// 		// 不满足播放条件，为每个元素移除动画类
	// 		for (const key in elements) {
	// 			elements[key].element.classList.remove(elements[key].animationClass);
	// 		}
	// 	}
	// }
	//
	// // 滚动监听
	// window.addEventListener('scroll', () => {
	// 	const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	// 	playAnimation(scrollTop);
	// });
	//
	// // 首页加载时播放动画
	// playAnimation(0);
	//
	//
	//
	// let text = "大学生人际关系现状";
	// let index = 0;
	// let textArea = document.getElementById("text-area");
	//
	// function printText() {
	// 	if (index < text.length) {
	// 		let currentText = text.substr(0, index + 1);
	// 		textArea.innerHTML = currentText;
	// 		index++;
	// 		let textAreaRect = textArea.getBoundingClientRect();
	// 		let cursor = document.getElementById("cursor");
	// 		cursor.style.left = textAreaRect.left + textAreaRect.width + "rem";
	// 		// cursor.style.top = textAreaRect.top + "px";
	// 	} else {
	// 		clearInterval(timer);
	// 		let cursor = document.getElementById("cursor");
	// 		cursor.parentNode.removeChild(cursor); // 删除光标元素
	// 		let p2sbox = document.querySelector(".p2sbox");
	// 		p2sbox.style.transform = "translate(calc(100% - 105rem), -56%) scale(0.67)";
	// 		setTimeout(()=>{
	// 			textArea.innerHTML =''
	// 		},800)
	// 	}
	// }
	//
	// let timer = setInterval(function() {
	// 	printText();
	// }, 100);
	//
	// let cursor = document.getElementById("cursor");
	// setInterval(function() {
	// 	if (cursor.style.display === "none") {
	// 		cursor.style.display = "";
	// 	} else {
	// 		cursor.style.display = "none";
	// 	}
	// }, 500);



</html>

